<template>
  <div>
    <h4>发表评论</h4>
    <hr>
    <textarea rows="3" placeholder="请输入评论内容，最多输入120字" maxlength="120" v-model="content"></textarea>
    <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>

    <div class="cmt-list">
      <div v-for="(item, i) in list" :key="i">
        <div class="cmt-info">
          <span>第{{i+1}}楼</span>&nbsp;&nbsp;
          <span>用户：{{item.user_name}}</span>&nbsp;&nbsp;
          <span>发表时间：{{item.add_time | dateFormat}}</span>&nbsp;&nbsp;
        </div>
        <div class="cmt-content">{{item.content}}</div>
      </div>
    </div>

    <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'

export default {
  data() {
    return {
      pageindex: 1, // 默认展示第一页评论
      list: [], // 评论数组
      content: '' // 将要发表的评论内容
    }
  },
  created() {
    this.getCommentList();
  },
  methods: { // 业务逻辑
    getCommentList() { // 获取评论列表
      this.$http.get('api/getcomments/' + this.artId + '?pageindex=' + this.pageindex).then(res => {
        // console.log(res.body);
        var result = res.body;
        if (result.status === 0) {
          // this.list = result.message;
          this.list = this.list.concat(result.message);
        } else {
          Toast('获取评论数据失败！');
        }
      });
    },
    getMore() { // 点击获取更多
      this.pageindex++;
      this.getCommentList();
    },
    postComment() { // 点击发表评论
      // 判断输入内容是否为空
      if (this.content.trim().length == 0) {
        return Toast('评论内容不能为空！');
      }
      // 发表评论
      // 1. 先组织出一个评论对象
      // 2. 调用 post 请求发送数据
      // 3. 检测 请求的返回值， 将最新的评论，加载到一个位置
      this.$http.post('api/postcomment/' + this.artId, { content: this.content }, { emulateJSON: true }).then(res => {
        if (res.body.status === 0) {
          Toast('发表评论成功！');
          // 评论发表之后，重新渲染最新的列表
          // 这个方法调用之后，假如已经加载了第二页的评论，那么刷新之后，只会得到第一页的评论数据，所以体验不好
          // this.getCommentList();
          // 把最新的评论，手动 追加到数组的起始位置
          this.list.unshift({ user_name: '匿名用户', add_time: new Date(), content: this.content });
          // 清空 content 文本框
          this.content = '';
        } else {
          Toast('评论数据发表失败！');
        }
      });
    }
  },
  props: ['artId'] // 子组件通过  props 属性，获取到父组件传递过来的 Id 值
}
</script>

<style lang="scss" scoped>
textarea {
  margin: 0;
  font-size: 14px;
}

.cmt-list {
  margin: 5px 0;
}

.cmt-info {
  font-size: 13px;
  background-color: #ccc;
  line-height: 30px;
}

.cmt-content {
  line-height: 40px;
  font-size: 14px;
  text-indent: 2em;
}
</style>
